import { useState } from "react";
import { Switch, Input, message } from "antd";
import { OnOffDesc } from "@/components/render";

interface props {
  welcomeCloseName: string[]; // 屏蔽的欢迎语
  setWelcomeCloseName: any; // 设置屏蔽欢迎语
}

const WelcomeMesClose = ({ welcomeCloseName = [], setWelcomeCloseName }: props) => {
  const [, setRender] = useState(0);
  const [isLimit, setIsLimit] = useState(false);
  const [isInput, setIsInput] = useState(false);
  const [inpValue, setInpValue] = useState("");

  return (
    <div className="max-w-1230 flex mt-14 justify-start mb-22">
      <span className="mx-5 min-w-105 text-right">欢迎语屏蔽：</span>

      <div>
        {/* 开关 */}
        <div className="flex items-center">
          <Switch
            size="small"
            onChange={e => {
              setIsLimit(e);
            }}
            checked={isLimit}
          />
          <OnOffDesc
            flag={isLimit}
            desc="开启后，客户昵称中包含设定的关键词的客户不会收到欢迎语"
          />
          <a
            target="_blank"
            href="https://shimo.im/docs/pmkxQblyJaSO2aAN/"
            className="text-blue-default">
            查看介绍
          </a>
        </div>
        <div className={`flex items-center flex-wrap mt-12 ${isLimit ? "" : "none"}`}>
          <div
            className="w-110 h-28 bg-white rounded-sm border-1 border-solid border-grey-300 flex items-center justify-center mr-10 mb-5 cursor-pointer"
            onClick={() => {
              setIsInput(true);
            }}>
            + 添加屏蔽昵称
          </div>

          {isInput ? (
            <div className="w-110 h-28 text-grey-800 border-1 border-solid border-grey-300 rounded-sm mr-10 mb-5">
              <Input
                placeholder="添加屏蔽昵称"
                bordered={false}
                value={inpValue}
                onChange={(e: any) => {
                  setInpValue(e.target.value);
                }}
                autoFocus
                onBlur={(e: any) => {
                  let value = e.target.value;
                  setIsInput(false);
                  setInpValue("");
                  if (!value) {
                    message.warn("关键词不能为空");
                    return;
                  }
                  for (let i = 0, len = welcomeCloseName.length; i < len; i++) {
                    if (welcomeCloseName[i] === value) {
                      message.warn("关键词不能重复");
                      return;
                    }
                  }
                  welcomeCloseName.push(e.target.value);
                  setWelcomeCloseName(welcomeCloseName);
                  //   setRender(Math.random() + 1);
                }}
              />
            </div>
          ) : null}

          {welcomeCloseName.map((item: any, index: number) => {
            return (
              <div
                className="h-28 py-4 px-10 min-w-50 bg-grey-100 rounded-sm  border-1 border-solid border-grey-300 mr-10 mb-5 flex items-center text-grey-800"
                key={item}>
                {item}
                <i
                  className="iconfont icon-chuyidong text-xs ml-5"
                  onClick={() => {
                    // console.log(123);
                    welcomeCloseName = welcomeCloseName.filter(
                      (newItem: any, newindex: number) => newindex !== index
                    );
                    setWelcomeCloseName(welcomeCloseName);
                    setRender(Math.random() + 1);
                  }}></i>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default WelcomeMesClose;
